<template>
  <div class="main">
    <!-- 小播放控件 -->
    <div class="foot" v-show="songListData.length !== 0" @click="pageShow = true">
      <div class="dot">
        <img :src="defaultSong.songPic" />
      </div>
      <span class="songName">{{ defaultSong.songName }}</span>
      <div class="play">
        <van-icon :name="playName" size="30" @click.stop="playMusic()" />
      </div>
      <van-icon name="bars" size="30" @click.stop="show = true" />
    </div>
    <!-- 歌曲详情页 -->
    <van-popup v-model="pageShow" class="pageShow" position="bottom">
      <!-- 头部 -->
      <van-nav-bar fixed :border="false" class="navbar">
        <template #left>
          <van-icon name="arrow-down" size="22" @click="pageShow = false" />
        </template>
        <template #title>
          <span class="title-songname">{{ songListData[orderNum].songName }}</span> <br />
          <span class="title-singername">{{ defaultSong.singerName }}</span>
        </template>
        <template #right>
          <van-icon name="arrow-down" size="22" @click="pageShow = false" />
        </template>
      </van-nav-bar>
      <!-- 播放转盘 -->
      <div class="PlayContainer">
        <div class="rotaryTable">
          <img :src="defaultSong.songPic" />
        </div>
        <div class="controls">
          <div class="top flex">
            <van-icon size="22" name="like-o" />
            <van-icon size="22" name="down" />
            <van-icon size="22" name="apps-o" />
            <van-icon size="22" name="chat-o" />
            <van-icon size="22" name="ellipsis" />
          </div>
          <div class="middle flex">
            <span>{{ this.SongCurrentTime }}</span>
            <van-slider v-model="ProgressVal" @change="onProgress" :max="this.songTime" active-color="#ee0a24" button-size="6px" style="margin: 0 20px" />
            <span>{{ this.$moment(this.songTime * 1000).format('mm:ss') }}</span>
          </div>
          <div class="bottom flex">
            <van-icon name="revoke" size="22" />
            <van-icon name="arrow-left" size="22" @click="PrevBtn()" />
            <van-icon :name="playName" size="40" @click="playMusic()" />
            <van-icon name="arrow" size="22" @click="NextBtn()" />
            <van-icon name="bars" size="22" @click.stop="show = true" />
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 歌单列表弹出 -->
    <van-popup v-model="show" round position="bottom" get-container="body" :style="{ height: '60%' }">
      <div class="dialogbox">
        <p>当前播放({{ this.songListData.length }})</p>
        <div class="Operation">
          <div><van-icon name="exchange" /> <span>随机播放</span></div>
          <div class="iconbox">
            <van-icon name="down" size="18" />
            <van-icon name="add-o" size="18" />
            <van-icon name="delete-o" size="18" />
          </div>
        </div>
        <ul>
          <li class="songlist" v-for="(item, index) of this.songListData" :key="index" @click="clickListSong(index)">
            <div :class="orderNum == index ? 'active' : ''">
              <span class="playon-icon" v-show="orderNum == index"></span><span>{{ item.songName }}</span> - <span>{{ item.singerName }}</span>
            </div>
            <van-icon name="cross" size="18" />
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script>
import eventBus from '../../eventBus.js'
export default {
  data() {
    return {
      isPlay: false,
      playName: 'play-circle-o', //暂停
      // 歌曲列表弹出状态
      show: false,
      // 详情控件弹出状态
      pageShow: false,
      // 歌曲列表
      songListData: [],
      // 播放器
      audioObj: null,
      // 当前播放歌曲索引
      defaultSong: '',
      // 歌曲信息
      getSongList: {
        id: null,
        singerName: '',
        songName: '',
        songPic: '',
        songUrl: '',
      },
      // 歌曲索引
      orderNum: 0,
      // 进度条值
      ProgressVal: 0,
      //歌曲总时长
      songTime: '',
      //歌曲正在播放的时间
      SongCurrentTime: '0',
    }
  },
  methods: {
    // 播放
    playMusic() {
      if (this.isPlay === false) {
        // 播放
        this.audioObj.play()
        this.playName = 'pause-circle-o'
        this.isPlay = true
      } else {
        // 暂停
        this.audioObj.pause()
        this.playName = 'play-circle-o'
        this.isPlay = false
      }
    },
    // 上一首
    PrevBtn() {
      this.orderNum--
      if (this.orderNum < 0) {
        this.orderNum = this.songListData.length - 1
      }
      this.switchSong()
    },
    // 下一首
    NextBtn() {
      this.orderNum++
      if (this.orderNum > this.songListData.length - 1) {
        this.orderNum = 0
      }
      this.switchSong()
    },
    // 切换歌曲
    switchSong() {
      this.ProgressVal = 0
      this.audioObj.src = this.songListData[this.orderNum].songUrl
      // 重新加载获取歌曲时长
      this.audioObj.load()
      this.audioObj.oncanplay = () => {
        this.songTime = this.audioObj.duration
      }
      this.audioObj.ontimeupdate = () => {
        this.onTimeUpdate()
      }
      this.audioObj.play()
      this.playName = 'pause-circle-o'
      this.isPlay = true
      this.defaultSong = this.songListData[this.orderNum]
    },
    // 点击歌曲列表切换
    clickListSong(idx) {
      this.orderNum = idx
      this.switchSong()
    },
    addClickMusic(id, index) {
      this.http.get(`/song/url?id=${id}`).then((res) => {
        console.log(res.data.data[0].url)
        if (res.data.code !== 200) return this.$toast('获取数据失败！')

        this.getSongList.songUrl = res.data.data[0].url
        this.songListData.push(JSON.parse(JSON.stringify(this.getSongList)))
        //避免相同歌曲在歌曲列表中
        var obj = {}
        this.songListData = this.songListData.reduce((item, next) => {
          obj[next.id] ? '' : (obj[next.id] = true && item.push(next))
          return item
        }, [])
        // 创建音乐播放器
        if (this.audioObj == null) {
          this.audioObj = new Audio(this.songListData[this.orderNum].songUrl)
        } else {
          // 有值 播放
          this.audioObj.src = this.songListData[this.orderNum].songUrl
        }
        this.orderNum = index
        this.switchSong()
        console.log(...this.songListData, this.songListData[this.orderNum].songUrl)
      })
    },
    // 当前播放时间
    // currentBroadcast() {
    //   this.SongCurrentTime = this.audioObj.currentTime
    // },
    // 进度条
    onProgress(ProgressVal) {
      console.log(ProgressVal)
      this.audioObj.currentTime = ProgressVal
      this.SongCurrentTime = ProgressVal
      this.SongCurrentTime = this.$moment(this.SongCurrentTime * 1000).format('mm:ss')
      this.audioObj.play()
      this.playName = 'pause-circle-o'
      this.isPlay = true
    },
    onTimeUpdate() {
      this.SongCurrentTime = this.$moment(this.audioObj.currentTime * 1000).format('mm:ss')
      this.ProgressVal = (this.audioObj.currentTime / this.songTime) * this.songTime
    },
  },
  watch: {
    onProgress(newTime, oldTime) {},
  },
  mounted() {
    eventBus.$on('sendID', (id, songName, singerName, songPic, index) => {
      console.log(index)
      this.addClickMusic(id, index)
      this.getSongList.id = id
      this.getSongList.songName = songName
      this.getSongList.singerName = singerName
      this.getSongList.songPic = songPic
    })

    // 每日推荐音乐地址
    // this.http.get(`/song/url?id=${this.getSongID}`).then((res) => {
    // if (res.data.code !== 200) {
    //   this.$toast('获取数据失败！')
    //   return false
    // }
    // // 创建音乐播放器
    // if (this.audioObj == null) {
    //   this.audioObj = new Audio(this.musicListData.musicList[this.orderNum])
    // } else {
    //   // 有值 播放
    //   this.audioObj.src = this.musicListData.musicList[this.orderNum]
    // }
    // })
    // this.songListData = this.$store.state.SongList
    // console.log(this.songListData.length)
  },
}
</script>
<style scoped>
.title-songname {
  color: #fff;
}
.title-singername {
  color: #ebebeb;
  font-size: 14px;
}
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: calc(100vh - 46px - 421px);
  padding: 20px 0;
  box-sizing: border-box;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 90%;
  margin: auto;
}
.rotaryTable {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 421px;
  overflow: hidden;
}
.rotaryTable img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 18px solid #000;
  margin-bottom: 0.2rem;
}
.PlayContainer {
  padding-top: 46px;
}
.main .navbar {
  background-color: transparent;
}
.pageShow.van-popup {
  width: 100%;
  height: 100%;
  background-color: #d9afd9;
  background-image: linear-gradient(0deg, #d9afd9 0%, #97d9e1 100%);
}
.active {
  color: #00cc4c;
}
.playon-icon {
  display: inline-block;
  width: 10px;
  height: 8px;
  margin-right: 10px;
  background: url(../../../src/assets/playon-green.gif);
}
.foot {
  display: flex;
  align-items: center;
  justify-content: space-around;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background-color: #000000;
  opacity: 0.8;
  color: var(--font-color);
  padding: 0 20px;
  box-sizing: border-box;
}
.play {
  margin-right: 20px;
}
.songName {
  flex: 1;
  margin: 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dot {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(#3a2b2b, #1a1717);
}
.dot img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.icon {
  transform: rotate(90deg);
  z-index: -1;
}

.van-popup {
  background-color: #101010;
  color: var(--font-color);
}
.songlist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0;
}
.Operation {
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
}
.dialogbox {
  padding: 0 20px;
}
.box {
  margin-bottom: 120px;
  text-align: center;
}
.iconbox i {
  margin-left: 22px;
}
</style>
